<template>
	<view class="content">
		<!-- <view class="closeWrap">
			<image @tap="comeback" class="closeImg" src="../../static/img/icon_return.png"></image>
		</view> -->
		<!-- <view class="lockWrap">
			<image class="lock" src="../../static/img/reset/lock-3@2x.png"></image>
		</view>
		<view class="lockWrap">
			<text class="lockContent" v-if="operateType=='FORGET'">注销账户</text>
		</view> -->
		<view class="loginWrap">
			<p class='p1'>为保证你的账号安全，在你提交的注销申请生效前，需同时满足以下条件:</p>
			<p class='p2'>1.账号处于安全状态</p>
			<p class='p3'>账号为你本人拥有，处于正常使用状态，无被盗、违规、封禁风险。</p>
			<p class='p2'>2.账号财产已结清，交易已完成</p>
			<p class='p3'>账号下所有关联业务的资产及预期收益和权益(包括会员、合伙人身份)均已结清、退款、清空或自愿放弃，所有交易已完成或已自愿放弃。</p>
			<p class='p2'>3.账号微信授权、绑定已解除</p>
			<p class='p2'>4.账号无任何交易，任何纠纷，包括但不限于投诉或举报，服务均已完成或已自愿放弃</p>
		</view>
		<view class="agreementWrap" v-show="true">
			<radio :checked="isAgree" style="transform: scale(0.7);" @tap="isAgree = !isAgree"></radio>
			<text class="agree">我已阅读并同意《注销须知》</text>
		</view>
		<view class="submitWrap">
			<view @tap="doLogOff" class="submit" style="background: #ffb3b3;">
				<text style="font-size: 32rpx;color: #F5F5F5;letter-spacing: 2rpx;">下一步</text>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { forgetPassword, sendSmsCode, queryAgreement } from '@/utils/api/index';
	import { onShow, onLoad, } from '@dcloudio/uni-app'
	import { logOffUser } from '@/utils/api/userInfo.ts'
	const phone = ref('') //手机号
	const smsCode = ref('')
	const smsId = ref('')
	const isEye = ref(true)
	const comeback = () => {
		uni.navigateBack()
	}
	const timer = ref()
	const isCode = ref(false)
	const secondsLeft = ref(60)
	const newPwd = ref('') //新密码
	const agreementList = ref([])
	const isAgree = ref(false)
	const isPop = ref(false)
	const operateType = ref('FORGET')

	const doLogOff = () => {
		if (!isAgree.value) {
			uni.showToast({
				title: '请先同意注销协议',
				icon: 'none'
			});
			return;
		}
		uni.showModal({
			title: '提示',
			content: '是否确认注销？',
			success: function (res) {
				if (res.confirm) {
					logOffUser().then(res => {
						uni.showToast({
							title: '注销成功',
							icon: 'success'
						});
						uni.clearStorage()
						uni.navigateTo({
							url: '/pages/login/login'
						});
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
					// 这里执行取消后的操作
				}
			}
		});
		// uni.showActionSheet({
		// 	itemList: ['确认注销'],
		// 	success: function (res) {
		// 		logOffUser().then(res => {
		// 			uni.showToast({
		// 				title: '注销成功',
		// 				icon: 'success'
		// 			});
		// 			uni.clearStorage()
		// 			uni.navigateTo({
		// 				url: '/pages/login/login'
		// 			});
		// 		})
		// 	}
		// });
	}

	const loadAgreement = async () => {
		const res = await queryAgreement({
			data: {
				agreementType: 'LOGIN'
			}
		})
		agreementList.value = res.data
	}
	loadAgreement()

	onLoad((option) => {
		const type = option.operateType
		if (type) {
			operateType.value = type
		}
		phone.value = option.phone
	})
</script>

<style scoped>
	.lockWrap {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.lock {
		width: 168rpx;
		height: 168rpx;
		margin-top: 12%;
	}

	.lockContent {
		font-size: 48rpx;
		color: #262626;
		width: 192rpx;
		height: 67rpx;
		font-weight: bold;
	}

	.content {
		width: 100%;
		padding-top:30rpx;
		background: url('../../static/img/bj.png') no-repeat;
	}

	.bj {
		width: 100%;
		height: 1624rpx;
		position: absolute;
	}

	.closeWrap {
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
	}

	.closeImg {
		width: 36rpx;
		height: 36rpx;
		margin-left: 35rpx;
	}

	.title {
		margin-top: 15%;
		margin-left: 10%;
	}

	.tip {
		margin-top: 15rpx;
		margin-left: 10%;
	}

	.loginWrap {
		width: 85%;
		margin-left: 10%;
	}

	.submitWrap {
		width: 100%;
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.submit {
		width: 638rpx;
		height: 88rpx;
		background: #F0F0F0;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.agreementWrap {
		width: 80%;
		margin-top: 20rpx;
		margin-left: 10%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.agree {
		color: #8C8C8C;
		font-size: 24rpx;
	}

	.p1{
		margin-bottom:30rpx;
		font-size:32rpx;
	    font-weight: 400 ;
	}
	.p2{
		margin-top: 30rpx;
		font-size: 30rpx;
		 font-weight: 200 ;
	}
	.p3{
		color: #999;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
</style>